<div class='formulaire_spip'>
    [<p class="reponse_formulaire reponse_formulaire_ok">(#ENV**{message_ok})</p>]
    [<p class="reponse_formulaire reponse_formulaire_erreur">(#ENV*{message_erreur})</p>]


    <script>
    $(document).ready(function() {
        insert_index = 0;

// add new group
        $('.list_form .add_field_button').click(function(){
            var container = $('#groupes');
            var content = '<tr class="t_groupe-'+insert_index+'">';
            // Inputs for insert here
            content += '<td>?</td><td>';
            content += '<input type="text" name="elements_insert['+insert_index+'][titre]" value="" style="width: 98%;" />';
            content += '</td><td>';
            content += '<a href="javascript:;" class="delete_link"><?php echo(_T('ecatalogue:delete')); ?></a>';
            content += '</td></tr>';

            insert_index++;
            container.append(content);
        });

// delete group
        $('.list_form .delete_link').live('click', function(){
            if (confirm('<?php echo(_T('ecatalogue:delete_element')); ?> "' + $(this).parent().parent().find('input').val() + '"?')) {
                var element_id = $(this).attr('data-element-id');
                if (element_id!=undefined) {
                    $('.list_form').append('<input type="hidden" name="elements_delete['+element_id+']" value="'+element_id+'" />');
                }
                $(this).parent().parent().remove();
            }
        });

    });
    </script>
    <form method='post' action='#ENV{action}' id="ecatalogue_groupes_form" class="list_form"><div>
        <div>
            #ACTION_FORMULAIRE{#ENV{action}}

            <h2 style="text-align:center;"><:ecatalogue:groupes_list:></h2>

            <table style="text-align:center; width: 100%;">
                <tbody id="groupes">

                <BOUCLE_proprietes(ECATALOGUE_GROUPES){par num titre}>
                    <tr class="groupe-#ID_GROUPE">
                        <td class="id_groupe">
                            #ID_GROUPE
                        </td>
                        <td>
                            <input type="text" class="titre_groupe" name="elements_update[#ID_GROUPE][titre]" value="#TITRE**" style="width: 98%;" />
                        </td>
                        <td>
                            <a href="#" data-element-id="#ID_GROUPE" class="delete_link"><:ecatalogue:delete:></a>
                        </td>
                    </tr>
                </BOUCLE_proprietes>

                </tbody>
            </table>

            <div style="font-weight: bold; width: 100%; text-align: center;">
                <:ecatalogue:form_save_to_change:>
            </div>

            <p class='boutons'>
                <input type='button'  onclick="javascript:window.location.reload();" name='cancel_button' value='<:ecatalogue:cancel:>' />
                <input type='button' class="add_field_button" name='add_field_button' value='<:ecatalogue:add_groupe:>' />
                <input type='submit' name='save_submit' value='<:bouton_enregistrer:>' />
            </p>
        </div>
    </form>
</div>
